<template>
  <div class="expert-details">
    <van-sticky>
      <van-nav-bar
        title="咨询师详情"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
      ></van-nav-bar>
    </van-sticky>
    <div class="user">
      <div class="img-div">
        <img :src="user!.headPortrait" alt="" />
      </div>
      <div class="info">
        <div class="user-name">
          <span class="name">{{ user!.expertInquiryName }}</span>
          <div class="year">
            <span>从业年限：</span
            ><span class="time">{{ user!.period }}年</span>
          </div>
        </div>
        <div class="location">
          <span>{{ user!.qualifications }}</span>
        </div>
        <div class="collection"></div>
        <div class="user-type">
          <div v-for="item2 in category" :key="item2">
            {{ item2 }}
          </div>
        </div>
      </div>
    </div>
    <div class="experience">
      <div class="date">
        <div>
          <span>咨询人数：</span
          ><span class="duration">{{ total.population }}人次</span>
        </div>
        <div>|</div>
        <div>
          <span>服务时长：</span
          ><span class="duration">{{ total.duration }}小时</span>
        </div>
      </div>
    </div>
    <div class="operation">
      <van-tabs v-model="active" sticky line-width="80" color="#22A7F2">
        <van-tab title="个人简介">
          <div class="introduction remark"></div>
        </van-tab>
        <van-tab title="服务介绍">
          <div class="service">
            <div class="van-coupon list">
              <div class="title2">
                <div class="specific-service">
                  <span>单次</span>&nbsp;&nbsp;<span>咨询服务</span>
                </div>
                <div>
                  <span class="price">{{ user!.consultFee }}元</span
                  >&nbsp;&nbsp;<span>/次</span>
                </div>
              </div>
              <div class="title2">
                <div><span>视频/电话</span>&nbsp;&nbsp;<span>50分钟</span></div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="预约时段">
          <div class="warning">
            若取消或者修改时间需提前24小时，请您提前做好安排
          </div>
          <div class="introduction">
            <DateOrder :tenant-id="id" :user-id="userId + ''"></DateOrder>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="order">
      <div class="share">
        <div>
          <div><img src="./img/share@2x.png" /></div>
          <div>推荐给朋友</div>
        </div>
        <div>
          <div><img src="./img/qiuzhu.png" /></div>
          <div>帮助</div>
        </div>
      </div>
      <div>
        <button class="button">预约咨询</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import DateOrder from '/@/views/reserve/components/dateOrder.vue'
import { useConsultant } from './index'

export default defineComponent({
  components: { DateOrder },
  setup() {
    const route = useRoute()
    let userId = route.query.userId
    let active = ref<number>(0)

    const { user, total, category, id } = useConsultant(
      userId as string,
      route.query.tenantId as string
    )

    watch(user, () => {
      const elementCreate = document.createElement('div')
      elementCreate.innerHTML = user.value!.remark
      document.querySelector('.remark')!.appendChild(elementCreate)
    })

    return {
      active,
      user,
      userId,
      id,
      category,
      onClickLeft() {
        history.back()
      },
      total,
    }
  },
})
</script>

<style lang="less" scoped>
.expert-details {
  min-height: 100vh;
  padding-top: 46px;
  color: #646566;
  font-size: 12px;
  background-color: white;

  .user {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    font-size: 12px;
    background-color: white;
    margin-top: 5px;

    .img-div {
      width: 70px;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }

    .info {
      width: 60vw;
      min-height: 80px;
      margin-left: 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .user-name {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .name {
          font-weight: bold;
          color: black;
          font-size: 15px;
        }

        .year {
          .time {
            font-size: 14px;
            color: black;
          }
        }
      }

      .location {
        // margin-top: 5px;
        display: flex;
        align-items: center;

        span {
          font-size: 12px;
          word-break: break-all;
          word-wrap: break-word;
        }
      }

      .collection {
        position: absolute;
        bottom: -10px;
        right: 0px;
        color: grey;

        span {
          padding-left: 5px;
        }
      }

      .user-type {
        display: flex;
        background: white;
        font-size: 10px;
        flex-wrap: wrap;

        div {
          border-radius: 8px;
          background: rgba(71, 146, 197, 0.7);
          color: white;
          padding: 2px 5px;
          margin-left: 4px;
          margin-top: 5px;
        }
      }
    }
  }

  .type {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    font-size: 13px;
    padding: 20px 0;
    color: rgb(34, 167, 242);
    background-color: rgb(245, 245, 245);

    .project {
      margin-top: 5px;
      color: #646566;
    }
  }

  .experience {
    width: 90%;
    padding: 10px;
    background-color: rgb(232, 238, 245);
    margin: 15px auto;
    border-radius: 10px;

    .date {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .duration {
        font-size: 15px;
        color: black;
      }
    }
  }

  .operation {
    font-size: 12px;
    padding-bottom: 30px;
    border-top: 5px solid rgb(232, 238, 245);

    .introduction {
      padding: 15px;
    }

    .warning {
      padding: 10px 0 0 30px;
    }

    .service {
      padding: 5px;

      .list {
        margin: 5px;
        padding: 5px;
        box-shadow: 0px 0px 4px #aaaaaa;

        > .title2 {
          display: flex;
          justify-content: space-between;
          align-content: center;
          padding: 8px 10px;

          .specific-service {
            font-size: 14px;
            font-weight: bold;
            color: black;
            display: flex;
            align-items: flex-end;
          }

          .price {
            color: red;
            font-size: 13px;
            font-weight: bold;
          }
        }
      }
    }
  }

  .order {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    background: white;

    .share {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      text-align: center;

      div {
        margin-right: 15px;
      }

      img {
        width: 15px;
        height: 15px;
      }
    }

    .button {
      width: 130px;
      height: 45px;
      color: white;
      background-color: rgb(97, 187, 131);
      border: none;
      font-size: 14px;
    }
  }
}
</style>
